<template>
  <div class="box">
	<div class="logoBox">
	    <img src="../../assets/img/logos.png" alt="logo" />
	</div>
    <div class="content">
      <!-- <ul class="linkList">
        <li @click="goOther(1)">{{ $t("login.切换线路") }}</li>
        <li @click="goOther(2)">{{ $t("语言选择") }}</li>
      </ul> -->
      <div class="loginBox">
        <div class="itemBox">
          <!-- <img src="../../assets/images/account.png" alt="" /> -->
		  <div>账号</div>
          <input
            type="text"
            v-model="form.email"
            :placeholder="$t('请输入邮箱地址')"
            @blur="recover"
          />
        </div>
        <div class="itemBox">
          <!-- <img src="../../assets/images/password.png" alt="=" /> -->
		  <div>密码</div>
          <input
            type="password"
            v-model="form.pwd"
            :placeholder="$t('login.请输入密码')"
            @blur="recover"
          />
        </div>
      </div>
      <div class="loginBtn btn">
        <van-button
          block
          type="info"
          :loading-text="$t('登录中') + '...'"
          :loading="loading"
          @click="login"
          >{{ $t("login.登录") }}</van-button
        >
      </div>
      <div class="registerBtn btn1">
        <!-- <van-button block type="default"></van-button> -->
		<div @click="goRegister">还没有账号？<span style="color: #f8e16d;">马上开户</span></div>
      </div>
	  <div class="btn1">当前在线：<span style="color: red;">412{{shuzhi}}</span>人</div>
	  <div class="flex">
		  <p class="note" @click="gomodal">{{ $t("login.忘记密码") }}</p>
		  <p class="note" @click="goService">在线客服</p>
	  </div>
    </div>
    <!-- <div class="serviceBox" @click="goService">
      <img src="../../assets/images/kf.png" alt="客服" />
    </div> -->
  </div>
</template>
<script>
import { passwordEncryption } from "@/utils/tools";
import {
	Dialog
} from 'vant';
export default {
  name: "login",
  components:{
	  Dialog
  },
  data() {
    return {
      form: {
        email: "",
        pwd: "",
      },
      loading: false,
	  config:[],
	  
	  shuzhi:176,
	  timer:[]
    };
  },
  mounted() {
	  $postAxios(api.getService, {}, (res) => {
	    this.config = res.data;
	  });
	  if(window.localStorage.getItem('token'))
	  {
		this.$router.push({ path: "/home" });
	  }
	  
	  this.jisuan()
  },
  beforeDestroy() {
	  clearInterval(this.timer)
  },
  methods: {
	  jisuan(){
		  let that = this;
		that.timer = setInterval(function(){
			that.shuzhi = Math.floor(Math.random() * 900) + 100;
		},2000)
	  },
    recover() {
      let agentValue = navigator.userAgent;
      // userAgent属性是一个只读的字符串，声明了浏览器用于 HTTP 请求的用户代理头的值，用于判断是Android设备还是IOS设备
      let isIOS = !!agentValue.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否是ios终端
      if (isIOS) {
        window.scrollTo(0, 0); // 如果是ios终端，则在失焦的时候使页面返回顶部
      }
    },
    // 跳转页面
    goOther(type) {
      if (type == 1) {
        //切换线路
        this.$router.push({ path: "/switchLine" });
      } else if (type == 2) {
        //切换语言
        this.$router.push({ path: "/switchLanguage" });
      }
    },
    // 登录
    login() {
      for (const key in this.form) {
        if (!this.form[key]) {
          this.$toast(this.$t("请将登录信息填写完整"));
          return false;
        }
      }
      var that = this;
	  this.$toast.loading({
		duration: 0,
		message: "",
		forbidClick: true,
	  });
      $postAxios(api.login, this.form, (res) => {

		   this.$toast.clear();
        if (res.code == 0) {

           this.$toast(this.$t("登录成功"));
          localStorage.setItem("token", res.data.token);
          // localStorage.setItem("token", passwordEncryption(res.token));
          // localStorage.setItem("userId", res.id);
          setTimeout(() => {
            this.$router.push({ path: "/home" });
          }, 600);
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    // 立即注册
    goRegister() {
      this.$router.push({ path: "/register" });
    },
    // 忘记密码
    goService() {
      this.$router.push({ path: "/onlineService" });
    },
	gomodal(){
		Dialog.alert({
		  message: '忘记密码请联系客服！'
		})
	},
  },
};
</script>
<style scoped lang="scss">
.box {
  position: absolute;
  left: 0px;
  top: 0;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  background-color: #21212b;
  
  .logoBox {
	width: 100%;
	height: 225px;
	box-sizing: border-box;
	padding: 100px 0 0 15px;
    img {
      width: 150px;
      height: 32px;
      display: block;
    }
  }
  .content {
    margin: 0 20px;
    padding: 24px 0;
    .linkList {
      margin: 0 auto 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      li {
        margin: 0 15px;
        color: #303133;
        font-size: 12px;
      }
    }
    .loginBox {
      margin-bottom: 22px;
      .itemBox {
        margin-bottom: 22px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: space-between;
		border-bottom: 1px solid #333;
		width: 100%;
        box-sizing: border-box;
        &:last-child {
          margin-bottom: 0;
        }
        div {
		  color: #fff;
		  font-size: 14px;
          flex: 0 0 60px;
          padding: 15px 30px 15px 15px;
        }
        input {
          display: block;
          border: none;
          flex: 1;
          font-size: 15px;
		  color: #fff;
		  background-color: transparent;
        }
      }
    }
    .btn {
      button {
		  height: 46px;
		  background-color: #f8e16d;
		  border: 0;
		  color: #000;
        font-size: 18px;
        border-radius: 4px;
      }
    }
	.btn1{
		margin: 30px 0;
		text-align: center;
		color: #fff;
		font-size: 14px;
	}
    .note {
      color: #fff;
      font-size: 14px;
      text-align: right;
    }
  }
  .serviceBox {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 15px;
    bottom: 45px;
    background-color: #fff;
    img {
      display: block;
    }
  }
  .flex{
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
  }
}
</style>
